{% extends 'myhome/index.html' %}

{% block title %}
<title>商品--支付</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/cartstyle.css" rel="stylesheet" type="text/css" />
<link href="/static/myhome/css/jsstyle.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block js %}
<script type="text/javascript" src="/static/myhome/js/address.js"></script>
{% endblock %}

{% block con %}
<div class="concent">
    <!--地址 -->
    <div class="paycont">
        <div class="address">
            <h3>确认收货地址</h3>
            <div class="control">
                <div class="tc-btn createAddr theme-login am-btn am-btn-danger">使用新地址</div></div>
            <div class="clear"></div>
            <li class="user-addresslist" style="display: none">
                <div class="address-left">
                    <div class="user DefaultAddr">
                        <span class="buy-address-detail">
                            <span class="buy-user">
                                艾迪
                            </span>
                            <span class="buy-phone">
                                15871145629
                            </span>
                        </span>
                    </div>
                    <br>
                    <div class="default-address DefaultAddr">
                        <span class="buy-line-title buy-line-title-type">
                            收货地址：
                        </span>
                        <span class="buy--address-detail">
                            <span class="province">
                                湖北省
                            </span>
                            <span class="city">
                                武汉市
                            </span>
                            <span class="dist">
                                武昌区/县
                            </span>
                            <span class="street">
                                东湖路75号众环大厦2栋9层902
                            </span>
                        </span>
                    </div>
                    <ins class="deftip hidden">
                        默认地址
                    </ins>
                </div>
                <div class="address-right">
                    <span class="am-icon-angle-right am-icon-lg">
                    </span>
                </div>
                <div class="clear">
                </div>
                <div class="new-addr-btn">
                    <a href="javascript:void(0);" class="rm">
                        设为默认
                    </a>
                    <span class="new-addr-bar rm">
                        |
                    </span>
                    <a href="javascript:void(0);" class="addressdel">
                        删除
                    </a>
                </div>
            </li>
            <ul class="AddressAll">
            </ul>
            <div class="clear"></div>
        </div>
        <!--物流 -->
        <div class="logistics">
            <h3>选择物流方式</h3>
            <ul class="op_express_delivery_hot wllist">
                <li data-value="yuantong" class="OP_LOG_BTN  ">
                    <i class="c-gap-right" style="background-position:0px -468px"></i>圆通
                    <span></span></li>
                <li data-value="shentong" class="OP_LOG_BTN  ">
                    <i class="c-gap-right" style="background-position:0px -1008px"></i>申通
                    <span></span></li>
                <li data-value="yunda" class="OP_LOG_BTN  ">
                    <i class="c-gap-right" style="background-position:0px -576px"></i>韵达
                    <span></span></li>
                <li data-value="zhongtong" class="OP_LOG_BTN op_express_delivery_hot_last ">
                    <i class="c-gap-right" style="background-position:0px -324px"></i>中通
                    <span></span></li>
                <li data-value="shunfeng" class="OP_LOG_BTN  op_express_delivery_hot_bottom">
                    <i class="c-gap-right" style="background-position:0px -180px"></i>顺丰
                    <span></span></li>
            </ul>
        </div>
        <div class="clear"></div>
        <!--支付方式-->
        <div class="logistics">
            <h3>选择支付方式</h3>
            <ul class="pay-list">
                <li class="pay card"  data-value="yinlian">
                    <img src="/static/myhome/images/wangyin.jpg">银联
                    <span></span></li>
                <li class="pay qq" data-value="weixin">
                    <img src="/static/myhome/images/weizhifu.jpg">微信
                    <span></span></li>
                <li class="pay taobao" data-value="zhifubao">
                    <img src="/static/myhome/images/zhifubao.jpg">支付宝
                    <span></span></li>
            </ul>
        </div>
        <div class="clear"></div>
        <!--订单 -->
        <div class="concent">
            <div id="payTable">
                <h3>确认订单信息</h3>
                <div class="cart-table-th">
                    <div class="wp">
                        <div class="th th-item">
                            <div class="td-inner">商品信息</div></div>
                        <div class="th th-price">
                            <div class="td-inner">单价</div></div>
                        <div class="th th-amount">
                            <div class="td-inner">数量</div></div>
                        <div class="th th-sum">
                            <div class="td-inner">金额</div></div>
                        <div class="th th-oplist">
                            <div class="td-inner">配送方式</div></div>
                    </div>
                </div>
                <div class="clear"></div>
                {% for v in data %}
                <div class="bundle  bundle-last">
                    <div class="bundle-main">
                        <ul class="item-content clearfix">
                            <div class="pay-phone">
                                <li class="td td-item">
                                    <div class="item-pic">
                                        <a href="#" class="J_MakePoint">
                                            <img src="{{ v.goodsid.pic_url }}" class="itempic J_ItemImg" style="width: 150px;"></a>
                                    </div>
                                    <div class="item-info">
                                        <div class="item-basic-info" style="line-height: 90px;">
                                            <center>
                                            <a href="#" class="item-title J_MakePoint" data-point="tbcart.8.11">{{ v.goodsid.title }}</a></div></center>
                                    </div>
                                </li>
                                <li class="td td-price">
                                    <div class="item-price price-promo-promo">
                                        <div class="price-content">
                                            <em class="J_Price price-now" style="line-height: 90px;">{{ v.goodsid.price }}</em></div>
                                    </div>
                                </li>
                            </div>
                            <li class="td td-amount" style="margin-top: 50px;">
                                <div class="amount-wrapper ">
                                    <div class="item-amount ">
                                        <span class="phone-title">购买数量</span>
                                        <div class="sl">
                                            <input class="text_box" name="" type="text" value="&nbsp;&nbsp;&nbsp;{{v.num}}" style="width:30px;">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="td td-sum" style="line-height: 90px;">
                                <div class="td-inner">
                                    <em tabindex="0" class="J_ItemSum number">
                                        {% load pagetag %}
                                        {% cartplus v.num v.goodsid.price %}
                                    </em></div>
                            </li>
                            <li class="td td-oplist">
                                <div class="td-inner" style="line-height: 90px;">
                                    <span class="phone-title">配送方式</span>
                                    <div class="pay-logis" style="color: red">
                                        全场包邮
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </div>
                    <div class="clear"></div>
                </div>
                {% endfor %}
                <div class="clear"></div>
                <form action="{% url 'myhome_ordercreate' %}" method="post">
                    <div class="pay-total">
                        <!--留言-->
                        <div class="order-extra">
                            <div class="order-user-info">
                                <div id="holyshit257" class="memo">
                                    <label>买家留言：</label>
                                    <input type="text" title="选填,对本次交易的说明（建议填写已经和卖家达成一致的说明）" placeholder="选填,建议填写和卖家达成一致的说明" class="memo-input J_MakePoint c2c-text-default memo-close">
                                    <div class="msg hidden J-msg">
                                        <p class="error">最多输入500个字符</p></div>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                    <!--含运费小计 -->
                    <div class="buy-point-discharge ">
                        <p class="price g_price ">合计（含运费）
                            <span>¥</span>
                            <em class="pay-sum">244.00</em></p>
                    </div>
                    <!--信息 -->
                    <div class="order-go clearfix">
                        <div class="pay-confirm clearfix">
                            <div class="box">
                                <div tabindex="0" id="holyshit267" class="realPay">
                                    <em class="t">实付款：</em>
                                    <span class="price g_price ">
                                        <span>¥</span>
                                        <em class="style-large-bold-red " id="J_ActualFee">244.00</em></span>
                                </div>
                                <div id="holyshit268" class="pay-address">
                                    <p class="buy-footer-address">
                                        <span class="buy-line-title buy-line-title-type">寄送至：</span>
                                        <span class="buy--address-detail">
                                            <span class="province">湖北</span>
                                            <span class="city">武汉</span>
                                            <span class="dist">洪山</span>
                                            <span class="street">雄楚大道666号(中南财经政法大学)</span></span>
                                    </p>
                                    <p class="buy-footer-address">
                                        <span class="buy-line-title">收货人：</span>
                                        <span class="buy-address-detail">
                                            <span class="buy-user">艾迪</span>
                                            <span class="buy-phone">15871145629</span></span>
                                    </p>
                                </div>
                            </div>
                            <div id="holyshit269" class="submitOrder">
                                <div class="go-btn-wrap">
                                    {% csrf_token %}
                                    <input type="hidden" name="addressid" value="">
                                    <input type="hidden" name="wl" value="">
                                    <input type="hidden" name="paytype" value="">
                                    <input type="hidden" name="cartids" value="{{ request.GET.cartids }}">
                                    <a id="J_Go" href="javascript:void(0)" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a></div>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div class="theme-popover-mask"></div>
    <div class="theme-popover" style="height: 350px;">
        <!--新增地址 -->
        <div class="am-cf am-padding">
            <div class="am-fl am-cf">
                <strong class="am-text-danger am-text-lg">
                    新增地址
                </strong>
            </div>
        </div>
        <hr/>
        <div class="am-u-md-12">
            <form class="am-form am-form-horizontal">
                <div class="am-form-group">
                    <label for="user-name" class="am-form-label">
                        收货人
                    </label>
                    <div class="am-form-content">
                        <input type="text" id="user-name" placeholder="收货人">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">
                        手机号码
                    </label>
                    <div class="am-form-content">
                        <input id="user-phone" placeholder="手机号必填" type="email">
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-phone" class="am-form-label">
                        所在地
                    </label>
                    <div class="am-form-content address">
                        <select name="province">
                            {% for v in province %}
                                <option value="{{ v.id }}">{{ v.name }}</option>
                            {% endfor %}
                        </select>

                        <select name="city">
                            <option>--请选择--</option>
                        </select>
                        <select name="county">
                            <option>--请选择--</option>
                        </select>                        
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-intro" class="am-form-label">
                        详细地址
                    </label>
                    <div class="am-form-content">
                        <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                        <small>
                            100字以内写出你的详细地址...
                        </small>
                    </div>
                </div>
                <div class="am-form-group theme-poptit">
                    <div class="am-u-sm-9 am-u-sm-push-3">
                        <div class="am-btn am-btn-danger" id="addressadd">
                            保存
                        </div>
                        <div class="am-btn am-btn-danger close" id="addressclose">
                            取消
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="clear"></div>
    <div class="footer">
        <div class="footer-hd">
            <p>
                <a href="#">恒望科技</a>
                <b>|</b>
                <a href="#">商城首页</a>
                <b>|</b>
                <a href="#">支付宝</a>
                <b>|</b>
                <a href="#">物流</a></p>
        </div>
        <div class="footer-bd">
            <p>
                <a href="#">关于恒望</a>
                <a href="#">合作伙伴</a>
                <a href="#">联系我们</a>
                <a href="#">网站地图</a>
                <em>© 2015-2025 Hengwang.com 版权所有</em></p>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 提交订单
    $('#J_Go').click(function(){
        // 判断表单内容是否为空
        if(!$(this).parents('form').find('input[name=addressid]').val()){
            alert('未选择收货地址！');
            return;
        }
        if(!$(this).parents('form').find('input[name=wl]').val()){
            alert('未选择物流方式！');
            return;
        }
        if(!$(this).parents('form').find('input[name=paytype]').val()){
            alert('未选择支付方式！');
            return ;
        }
        // 获取表单,进行提交
        $(this).parents('form').submit()
    })
    // 选择收货地址方式
    $('.AddressAll li').click(function(){
        $('input[name=addressid]').val($(this).attr('addrid'))
    })
    // 选择物流方式
    $('.wllist li').click(function(){
        $('input[name=wl]').val($(this).attr('data-value'))
    })
    // 选择支付方式
    $('.pay-list li').click(function(){
        $('input[name=paytype]').val($(this).attr('data-value'))
    })

    // 获取当前用户的所有收货地址
    getUsersAddress() // 每当打开此页面自动获取所有用户的地址
    function getUsersAddress(){
        // 清空之前的数据
        $('.AddressAll').empty()
        // 发送ajax请求获取数据
        $.get('{% url 'myhome_addresslist' %}',function(data){
            if(data.error==0){
                // console.log(data)
                // 有数据
                var add = data.data
                // console.log(add)
                // 循环数据
                for (var i=0;i < add.length;i++){
                    var li = $('.address li').eq(0).clone()
                    // console.log(add[i].id)
                    // console.log('1234')
                    // 判断当前是否为默认地址
                    if(add[i].isCheck){
                        li.addClass('defaultAddr')
                        li.find('.rm').remove()
                        $('.pay-address').find('.province').text(add[i].province)
                        $('.pay-address').find('.city').text(add[i].city)
                        $('.pay-address').find('.dist').text(add[i].county)
                        $('.pay-address').find('.street').text(add[i].info)
                        $('.pay-address').find('.buy-user').text(add[i].receiver)
                        $('.pay-address').find('.buy-phone').text(add[i].receivephone)
                        $('input[name=addressid]').val(add[i].id)
                    }
                    li.attr('addrid',add[i].id)
                    li.find('.buy-user').attr('id',add[i].id)
                    li.find('.buy-user').text(add[i].receiver)
                    li.find('.buy-phone').text(add[i].receivephone)
                    li.find('.province').text(add[i].province)
                    li.find('.city').text(add[i].city)
                    li.find('.dist').text(add[i].county)
                    li.find('.street').text(add[i].info)
                    // 让元素显示
                    li.show()
                    // 创建li加入到ul中
                    $('.AddressAll').append(li)
                } 
            }else{
                // $('.address').append('<br><center><p style="color:grey;font-size:20px;">暂无地址，可以点击添加地址！</p></center><br>')
            }
        },'json')
    }
    // 默认地址的单击事件
    $(".AddressAll li .rm").live('click',function(){
        // 获取默认地址的id
        var id = $(this).parents().find('.buy-user').attr('id')
        console.log(id)
        $.get('{% url 'myhome_addressedit' %}',{'id':id},function(data){
            if(data['error']==0){    
                getUsersAddress()
                console.log(data['msg'])
            }
            // console.log(data.receiver)
        })
        
    })
    // 删除某个收货地址
    $('.addressdel').live('click',function(){
        // 获取默认地址的id
       
        var id = $(this).parents().find('.buy-user').attr('id')
        console.log(id)
        $.get('{% url 'myhome_addressdel' %}',{'id':id},function(data){
            if(data['error'] == 1){
                alert(data['msg'])
            }
            if(data['error'] == 0){
                alert(data['msg'])
            }
            getUsersAddress()
        })
    })
    // 地址添加
    $('#addressadd').click(function(){
        var adds = {}
        adds.receiver = $('#user-name').val()
        adds.receivephone = $('#user-phone').val()
        adds.province = $('select[name=province]').val()
        adds.city = $('select[name=city]').val()
        adds.county = $('select[name=county]').val()
        adds.info = $('#user-intro').val()
        var data = JSON.stringify(adds);
        // 发送ajax请求,存储地址
        $.get('{% url 'myhome_addressadd'%}',{'data':data},function(data){
            getUsersAddress()
            // 触发取消事件
            $('#addressclose').trigger('click')
        },'json')
    })
    // 封装函数运算总价
    function totalPrice(){
        var amount = 0
        $('.J_ItemSum').each(function(){
            amount += Number($(this).text())
        })
        $('#J_ActualFee').text(amount.toFixed(2))
        $('.pay-sum').text(amount.toFixed(2))
    }
    // 调用函数计算金额
    totalPrice()
    // 获取页面中的下拉选框 绑定事件
    $('.address select').click(function(){
        // 获取当前选中的元素
        var id = $(this).val()
        // 发送ajax请求，获取下一级的数据
        $.get('{% url 'myhome_getcitys' %}',{'id':id},function(data){
            // 判断返回的数据
            if(data.length==0){
                return
            }
            // 判断城市等级
            if(data[0].level==2){
                var res = $('.address select[name=city]')
            }else if(data[0].level==3){
                var res = $('.address select[name=county]')
            }else{
                return;
            }
            var ops = ''
            // 遍历获取的结果,拼接成option选项
            for(var i=0;i<data.length;i++){
                ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
            }
            // 把拼接好的选项加入到下拉框中
            res.html(ops)
        },'json')
    })
</script>
{% endblock %}